<script setup>

import {inject, onMounted, ref} from "vue";
import CommentList from "@/components/CommentList";
import {likes, cancelLikes, addCommentForArticle, getArticelDetail} from "@/apis/article";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const router = useRouter()
const info = ref({})
const data = ref({})


const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const commentForm = ref({
  articleId: '', content: '', createDate: ''
})
const articleid = router.currentRoute.value.query.articleid
//获取详情
console.log(articleid)
const goArticelDetail = async (articleid) => {
  const res = await getArticelDetail(articleid)
  info.value = res.data
  data.value = info.value.comments
  console.log(res)
}
  onMounted(() => {
    goArticelDetail(articleid)
  })


//点赞
  const addLike = async (articleId) => {
    const res = await likes(articleId)
    console.log(res)
    if (res.code == 200) {
      ElMessage({type: 'success', message: res.message})
    } else {
      ElMessage({type: 'success', message: res.message})
    }
    goArticelDetail(articleId)
  }
  //取消点赞
  const cancleLike = async (id) => {
    const res = await cancelLikes(id)
    ElMessage({type: 'success', message: res.message})
    goArticelDetail(id)
  }
  const postArticleId = (articleId) => {
    commentForm.value.articleId = articleId
    console.log(articleId)
  }
  const date = () => {
    let date = new Date();
    let year = date.getFullYear()
    let mon = date.getMonth() + 1
    let day = date.getDate()
    let now = year + "-" + mon + "-" + day
    return now
  }
  const day = date()
  commentForm.value.createDate = day
//评论文章
  const commentForArticle = async () => {
    const {articleId, createDate, content} = commentForm.value
    console.log(articleId, createDate, content)
    const res = await addCommentForArticle({articleId, createDate, content})
    if (res.code == 200) {
      ElMessage({type: 'success', message: res.message})
    } else {
      ElMessage({type: 'error', message: res.message})
    }
    goArticelDetail(articleid)
}
</script>
<template>
  <div class="common-layout">
    <el-container style="margin: 10px auto;width: 70%">
      <el-container>
        <el-main>
          <el-card class="box-card" shadow="hover">
            <div class="card-header">
              <span class="title">{{ info.title }}</span>
              <time class="time">作者：{{ info.nickname }}</time>
            </div>
            <div class="content">{{ info.content }}</div>
            <div class="bottom" style="margin: 15px">
              <time class="time">于{{ info.createDate }}创建</time>
              <el-divider></el-divider>
              <el-button type="success" @click="addLike(info.id)" v-if="!info.likeStatus">点赞</el-button>
              <el-button type="success" @click="cancleLike(info.id)" v-if="info.likeStatus">取消点赞</el-button>
            </div>
            <div style="margin: 20px 0">
              <div style="margin: 30px 0">
                <el-divider></el-divider>
                <div style="text-align: left;margin-bottom: 100px">
                  <el-button type="primary" @click="dialogFormVisible=true;postArticleId(info.id)">评论文章
                  </el-button>
                </div>
              </div>
            </div>
            <div class="comment" style="margin: 0px 0">
              <div class="commentList" style="text-align: center">评论列表</div>
            </div>
            <CommentList :data="data"></CommentList>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog v-model="dialogFormVisible" title="为文章添加评论">
      <el-form :model="commentForm">
        <el-form-item>
          <el-form-item label="文章id" :label-width="formLabelWidth">
            <el-input v-model="commentForm.articleId" autocomplete="off" disabled/>
          </el-form-item>
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth" type="textarea">
          <el-input type="textarea" rows="4" v-model="commentForm.content" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="创建日期:" :label-width="formLabelWidth">
          <el-input v-model="commentForm.createDate" autocomplete="off" disabled/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="commentForArticle();dialogFormVisible = false;">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped>
.content {
  width: 95%;
  margin: 20px auto;
  text-align: left;
  font-size: 18px;
}

.title {
  text-align: center;
  font-size: 40px;
  text-decoration: solid;
}

.bottom {
  float: right;
}

.time {
  float: right;
}


.commentList {
  margin: 10px 0;
  font-size: 24px;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
  text-align: left;
}
</style>